<template>
	<view>
		<view class="head">
			<image src="../../static/images/arrow_left.png" mode=""></image>
			<view class="all">
				<view class="" @click="fenClass">
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="uni-input">{{ array[index] }}交易</view>
				</picker>
				</view>
				<image src="../../static/client/1.png" mode=""></image>
			</view>
			<view class=""></view>
		</view>

		<view class="box">
			<view class="photo"><image src="../../static/images/201916541220.jpg" mode=""></image></view>
			<view class="phone">
				<view class="name">医院</view>
				<view class="phoneNumber">176666666</view>
			</view>
			<view class="shop">
				<view class="">
					总交易额:
					<span class="red">99999999</span>
				</view>
				<view class="">
					总销售量:
					<span class="red">9999</span>
				</view>
			</view>
		</view>

		<view class="boxTwo">
			<view class="photo"><image src="../../static/images/201916541220.jpg" mode=""></image></view>
			<view class="phone">
				<view class="name">苹果</view>
				<view class="phoneNumber">编号:2</view>
			</view>
			<view class="shop">
				<view class="">销量: 22</view>
				<view class="hui" @click="showSize">
					{{ open }}
					<image :src="src" mode=""></image>
				</view>
			</view>
		</view>
		<view class="size" v-show="size">
			<view class="size-left">红色/大码</view>
			<view class="size-right">2</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			open: '展开',
			src: '../../static/images/arrow_down.png',
			size: false,
			array: ['全部', '今日','昨日','7天','30天'],
			index: 0,
		};
	},
	methods: {
		// 底部
		showSize() {
			if (this.size) {
				(this.open = '展开'), (this.src = '../../static/images/arrow_ondown.png');
				this.size = false;
			} else {
				(this.size = true), (this.open = '收起'), (this.src = '../../static/images/arrow_down.png');
			}
		},
		fenClass() {
			console.log(123);
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.head {
	height: 88rpx;
	background-color: #249af6;
	padding: 24rpx 35rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	color: #ffffff;
	image {
		width: 22rpx;
		height: 39rpx;
	}
	.all {
		display: flex;
		image {
			width: 17rpx;
			height: 10rpx;
			margin-left: 20rpx;
			margin-top: 20rpx;
		}
	}
}
.box {
	height: 191rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	.photo {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		overflow: hidden;
		image {
			width: 110rpx;
			height: 110rpx;
		}
	}
	.phone {
		height: 110rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 40rpx;
		flex: 1;
		.name {
			line-height: 55rpx;
		}
		.phoneNumber {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 55rpx;
		}
	}
	.shop {
		width: 301rpx;
		line-height: 55rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		text-align: right;
	}
	.red {
		color: #f64444;
	}
}
.boxTwo {
	height: 191rpx;
	background-color: #ffffff;
	margin-top: 20rpx;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	.photo {
		width: 130rpx;
		height: 130rpx;
		overflow: hidden;
		image {
			width: 130rpx;
			height: 130rpx;
		}
	}
	.phone {
		height: 130rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin-left: 40rpx;
		flex: 1;
		.name {
			line-height: 65rpx;
		}
		.phoneNumber {
			font-family: PingFang SC;
			font-weight: 500;

			line-height: 65rpx;
		}
	}
	.shop {
		width: 301rpx;
		line-height: 65rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		text-align: right;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
	.red {
		color: #f64444;
	}
	.hui {
		color: #249af6;
	}
	image {
		margin-left: 10rpx;
		width: 17rpx;
		height: 10rpx;
	}
}
.size {
	height: 100rpx;
	line-height: 100rpx;
	background-color: #eeeeee;
	display: flex;
	justify-content: space-evenly;
	line-height: 100rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	border-bottom: #666666;
}
</style>
